<!--
 * @Author: lp 654528967@qq.com
 * @Date: 2022-06-15 11:43:23
 * @LastEditors: lp 654528967@qq.com
 * @LastEditTime: 2022-06-21 10:47:41
 * @FilePath: \nien-vue3-admin\src\views\myMission\businessHandling\processApplication\components\NewCustomer.vue
 * @Description: 工作流客户表单
-->
<template>
  <el-form
    ref="editForm"
    :rules="rules"
    label-width="110px"
    class="customer-form"
    inline
    :model="form"
    :disabled="disabled"
  >
    <el-form-item label="客户全称" prop="wholeName">
      <el-input
        v-model.trim="form.wholeName"
        clearable
        placeholder="请输入客户全称"
      ></el-input>
    </el-form-item>
    
    <el-form-item label="客户简称" prop="customerName">
      <el-input
        v-model.trim="form.customerName"
        clearable
        autocomplete="off"
        maxlength="8"
        placeholder="请输入客户简称"
      ></el-input>
    </el-form-item>
    <el-form-item label="客户等级" prop="grade">
      <el-select
        v-model="form.grade"
        filterable
        clearable
        autocomplete="off"
        placeholder="请选择客户等级"
      >
        <el-option
          v-for="dict in priceGadeList"
          :key="dict.dictValue"
          :label="dict.dictLabel"
          :value="dict.dictValue"
        ></el-option>
      </el-select>
    </el-form-item>
    <!-- <el-form-item label="状态" prop="status">
          <el-radio-group size="mini" v-model="form.status">
            <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
          </el-radio-group>
        </el-form-item> -->
    <el-form-item label="类型" prop="type">
      <el-select
        v-model="form.type"
        filterable
        clearable
        placeholder="请选择类型"
      >
        <el-option
          v-for="dict in customTypeList"
          :key="dict.dictValue"
          :label="dict.dictLabel"
          :value="dict.dictValue"
        ></el-option>
      </el-select>
    </el-form-item>
    <!-- <el-form-item label="收款账号" prop="collectionAccount">
      <el-select filterablev-model="form.collectionAccount" clearable placeholder="请输入收款账号">
					<el-option v-for="dict in dicts[DictDirection.收款账户]" :key="dict.id" :label="dict.accountNo" :value="dict.accountNo"></el-option>
				</el-select>
    </el-form-item> -->
    <el-form-item label="开户行" prop="bankDeposit">
      <el-input
        v-model.trim="form.bankDeposit"
        clearable
        placeholder="请输入开户行"
      ></el-input>
    </el-form-item>
    <el-form-item label="收款账户名" prop="collectionAccountName">
      <el-input
        v-model.trim="form.collectionAccountName"
        clearable
        placeholder="请输入收款账户名"
      ></el-input>
    </el-form-item>
    <el-form-item label="地址" prop="address">
      <el-input
        v-model="form.address"
        clearable
        placeholder="请输入地址"
      ></el-input>
    </el-form-item>
    <el-form-item label="电话" prop="telephone">
      <el-input
        v-model.trim="form.telephone"
        clearable
        placeholder="请输入电话"
      ></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input
        v-model.trim="form.email"
        clearable
        placeholder="请输入邮箱"
      ></el-input>
    </el-form-item>
    <el-form-item label="负责人" prop="chargePerson">
      <el-input
        v-model.trim="form.chargePerson"
        placeholder="请输入负责人"
        clearable
      ></el-input>
    </el-form-item>
    <el-form-item label="负责人手机号" prop="chargePersonTel">
      <el-input
        v-model.trim="form.chargePersonTel"
        clearable
        placeholder="请输入负责人手机号"
      ></el-input>
    </el-form-item>
    <el-form-item label="所属机构" prop="areaCode">
      <el-select
        v-model="form.areaCode"
        filterable
        clearable
        placeholder="请选择所属机构"
      >
        <el-option
          v-for="dict in siteList"
          :key="dict.deptId"
          :label="dict.areaCode"
          :value="dict.deptId"
        ></el-option>
      </el-select>
      <!-- <receivingSite size="mini" v-model="form.areaCode" :receivingSite="receivingSite" /> -->
    </el-form-item>
    <el-form-item label="业务员" prop="businessManager">
      <el-select
        v-model="form.businessManager"
        filterable
        clearable
        placeholder="请选择业务员"
      >
        <el-option
          v-for="dict in userInfoList"
          :key="dict.id"
          :label="dict.nickName"
          :value="dict.userName"
        ></el-option>
      </el-select>
      <!-- <EmployeeList v-model="form.businessManager" placeholder="请输入业务员" :userList="userList" dictValue="nickName" size="mini" clearable /> -->
    </el-form-item>
    <el-form-item label="客服员" prop="customerService">
      <el-select
        v-model="form.customerService"
        filterable
        clearable
        placeholder="请选择客服员"
      >
        <el-option
          v-for="dict in userInfoList"
          :key="dict.id"
          :label="dict.nickName"
          :value="dict.userName"
        ></el-option>
      </el-select>
      <!-- <EmployeeList dictValue="nickName" v-model="form.customerService" placeholder="请输入客服员" :userList="userList" size="mini" clearable /> -->
    </el-form-item>
    <el-form-item label="结算员" prop="settlementClerk">
      <el-select
        v-model="form.settlementClerk"
        filterable
        clearable
        placeholder="请选择结算员"
      >
        <el-option
          v-for="dict in userInfoList"
          :key="dict.id"
          :label="dict.nickName"
          :value="dict.userName"
        ></el-option>
      </el-select>
      <!-- <EmployeeList dictValue="nickName" v-model="form.settlementClerk" placeholder="请输入结算员" :userList="userList" size="mini" clearable /> -->
    </el-form-item>
    <el-form-item label="提货员" prop="deliveryMan">
      <el-select
        v-model="form.deliveryMan"
        filterable
        clearable
        placeholder="请选择提货员"
      >
        <el-option
          v-for="dict in userInfoList"
          :key="dict.id"
          :label="dict.nickName"
          :value="dict.userName"
        ></el-option>
      </el-select>
      <!-- <EmployeeList dictValue="nickName" v-model="form.deliveryMan" placeholder="请输入提货员" :userList="userList" size="mini" clearable /> -->
    </el-form-item>
    <!-- <el-form-item label="余额" prop="balance">
      <el-input v-model.trim="form.balance" clearable disabled></el-input>
    </el-form-item> -->
    <el-form-item label="佣金" prop="commission">
      <el-input
        v-model.trim="form.commission"
        clearable
        placeholder="请输入佣金"
      ></el-input>
    </el-form-item>
    <el-form-item label="录单状态" prop="recordingStatus">
      <el-radio-group v-model="form.recordingStatus">
        <el-radio
          v-for="dict in clientStatusList"
          :key="dict.dictValue"
          :label="dict.dictValue"
        >
          {{ dict.dictLabel }}
        </el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="是否开通客户端" prop="isOpenAccount">
      <el-radio-group v-model="form.isOpenAccount">
        <el-radio
          v-for="dict in clientStatusList"
          :key="dict.dictValue"
          :label="dict.dictValue"
        >
          {{ dict.dictLabel }}
        </el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- <el-form-item label="可预订舱方数" prop="bookableProportion">
      <el-tooltip
        effect="dark"
        content="-1表示无限制，0表示无法订舱，其他值表示可预定方数"
        placement="top"
      >
        <el-input-number
          v-model="form.bookableProportion"
          :controls="false"
          disabled
          :min="-1"
        ></el-input-number>
      </el-tooltip>
    </el-form-item> -->
    <el-row>
      <el-col :span="24">
        <el-form-item label="营业执照" prop="businessLicenseFiles">
          <el-upload
            class="upload-demo"
            multiple
            action="#"
            accept="image/*"
            :auto-upload="false"
          >
            <el-button type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col>
        <el-form-item label="合同失效时间" prop="contractTime">
          <el-date-picker
            v-model="form.contractTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="合同" prop="contractFiles">
          <el-upload
            ref="upload2"
            action="#"
            class="upload-demo"
            multiple
            accept="image/*"
            :auto-upload="false"
          >
            <el-button type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script lang='ts' setup>
import { ref, watchEffect } from 'vue'
import { DictDirection } from '@/store/modules/dicts'
import { useDicts } from '@/utils'

const { 
  [DictDirection.客户端开关]: clientStatusList, 
  [DictDirection.员工信息]: userInfoList, 
  [DictDirection.价格等级]: priceGadeList, 
  [DictDirection.客户类型]: customTypeList, 
  [DictDirection.收货站点]: siteList, 
} = useDicts([DictDirection.客户端开关, DictDirection.员工信息, DictDirection.价格等级, DictDirection.客户类型, DictDirection.收货站点])
interface Form {
    status: string,
    roleId: number,
    wholeName: string,
    customerName: string,
    type: string,
    address: string,
    telephone: string,
    email: string,
    chargePerson: string,
    chargePersonTel: string,
    areaCode: string,
    businessManager: string,
    customerService: string,
    settlementClerk: string,
    deliveryMan: string,
    balance: string,
    commission: string,
    recordingStatus: string,
    isOpenAccount: string,
    grade: string,
    bookableProportion: string,
    businessLicenseFiles: any[],
    contractFiles: any[],
    bankDeposit: string,
    collectionAccountName: string,
    contractTime: string,
  }
const form = ref<Form>({
  status: '1',
  roleId: 99,
  wholeName: '',
  customerName: '',
  type: '',
  address: '',
  telephone: '',
  email: '',
  chargePerson: '',
  chargePersonTel: '',
  areaCode: '',
  businessManager: '',
  customerService: '',
  settlementClerk: '',
  deliveryMan: '',
  balance: '',
  commission: '',
  recordingStatus: '',
  isOpenAccount: '',
  grade: '',
  bookableProportion: '',
  businessLicenseFiles: [],
  contractFiles: [],
  bankDeposit: '',
  collectionAccountName: '',
  contractTime: '',
}), rules = {
    wholeName: [{ required: true, message: '请输入客户全称', trigger: 'blur' }],
    customerName: [
      { required: true, message: '请输入客户简称', trigger: 'blur' },
    ],
    status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
    type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
    address: [{ required: true, message: '请输入地址', trigger: 'blur' }],
    telephone: [{ required: true, message: '请输入电话', trigger: 'blur' }],
    settlementMode: [
      { required: true, message: '请选择结算模式', trigger: 'change' },
    ],
    chargePerson: [
      { required: true, message: '请输入负责人', trigger: 'blur' },
    ],
    chargePersonTel: [
      { required: true, message: '请输入负责人电话', trigger: 'blur' },
    ],
    businessManager: [
      { required: true, message: '请选择业务员', trigger: 'change' },
    ],
    grade: [{ required: true, message: '请选择客户等级', trigger: ['change'] }],
    // areaCode: [
    //   { required: true, message: '请选择所属机构', trigger: ['change'] },
    // ],
  }, editForm = ref(),
  prop = withDefaults(defineProps<{data?:Form, disabled?:boolean}>(), {
    data: () => ({
      status: '1',
      roleId: 99,
      wholeName: '',
      customerName: '',
      type: '',
      address: '',
      telephone: '',
      email: '',
      chargePerson: '',
      chargePersonTel: '',
      areaCode: '',
      businessManager: '',
      customerService: '',
      settlementClerk: '',
      deliveryMan: '',
      balance: '',
      commission: '',
      recordingStatus: '',
      isOpenAccount: '',
      grade: '',
      bookableProportion: '',
      businessLicenseFiles: [],
      contractFiles: [],
      bankDeposit: '',
      collectionAccountName: '',
      contractTime: '',
    }),
    disabled: false,
  }) 
defineExpose({
  form,
  formComponent: editForm,
})
watchEffect(() => {
  if (prop.data) form.value = prop.data
})

</script>

<style lang="less">
  .customer-form .el-form-item {
    width: 256px;
  }
</style>
